//瀑布流
$(function() {
	// 保证图片都能正常加载完成，方便后面进行准确的高度计算
		$(window).load(function() {
			loadImage1();
			$(window).resize(function(){
				loadImage1();
			})
		});
	
	// 点击按钮加载一批新数据
	$('.grid-load-more').click(function(){
		$('.grid-masonry-three-main').append($('.grid-masonry-three-main .main-box:lt(3)').clone());
		loadImage1();
	});
})
function loadImage1() {
	var box = $('.main-box');
	// 每张图片的宽度
	var boxWidth = box.eq(0).width();
	// 计算每一排能放几张图片
	var num = Math.floor($(window).width() / boxWidth);
	//当前banner宽度
	var scrollwidth = $('.grid-masonry-three-main').width();

	// 建立一数组存放每张图片的高度
	var boxHeigths = [];
	box.each(function(i, e){
		// 计算每张图片的高度
		var currentBoxHeight = $(this).height();
		// 如果是前5张应该要存入boxHeights数组中
		if (i < num) {
			boxHeigths.push(currentBoxHeight);
		} else {
			// 从第6张开始都要判断前面的那张高度最小
			var minBoxHeight = Math.min.apply(null, boxHeigths);
			// 查看最小盒子的高度在数组里面的下标位置
			var minBoxHeightIndex = $.inArray(minBoxHeight, boxHeigths);
			// 把图片放到哪个位置
			if(scrollwidth > 768){
				$(this).css({
					'position': 'absolute',
					'left': minBoxHeightIndex * ((0.312 * scrollwidth) + (0.021 * scrollwidth)),
					'top' : minBoxHeight + (0.02 * scrollwidth)
				});
				// 把最小图片的高度更新
				boxHeigths[minBoxHeightIndex] += (currentBoxHeight + (0.02 * scrollwidth));
			}else{
				$(this).css({
					'position': 'absolute',
					'left': minBoxHeightIndex * ((0.478 * scrollwidth) + (0.021 * scrollwidth)),
					'top' : minBoxHeight + (0.02 * scrollwidth)
				});
				// 把最小图片的高度更新
				boxHeigths[minBoxHeightIndex] += (currentBoxHeight + (0.02 * scrollwidth));
			}
			
			
			//瀑布流的高度
			var maxBoxHeight = Math.max.apply(null, boxHeigths);
			$('.grid-masonry-three-main').height(maxBoxHeight);
		}
	});	
}
